<template>
  <div v-if="getdetailcontent[0]">
    <header class="detail">
      <img
        src="../assets/images/详情/返回.png"
        alt=""
        class="img_left"
        @click="goback"
      />
      <van-tabs v-model:active="active" line-width="20px">
        <!-- 音频 -->
        <van-tab title="音频">
          <main class="audio">
            <div class="audio_top">
              <img
                :src="getdetailcontent[0].imgUrl"
                alt=""
                class="audio_top_img"
              />
              <div class="audio_top_right">
                <h3>{{ getdetailcontent[0].title }}</h3>
                <p class="middle_font">{{ getdetailcontent[0].describe }}</p>
                <p class="footer_font">
                  播放量 <span>{{ getdetailcontent[0].view }} 万</span>
                </p>
              </div>
            </div>
            <div class="audio_middle">
              <div class="audio_middle_top">
                <img
                  src="../assets/images/详情/减15.png"
                  alt=""
                  @click="reduce"
                />
                <div class="time">
                  <div>
                    <span>
                      <ul class="countDown">
                        <li class="countDown_Hours" v-if="doublej > 59">
                          {{ doublek }}
                        </li>
                        <li class="countDown_Minuetes">{{ doublej }}</li>
                        :
                        <li class="countDown_Seconds">{{ doublei }}</li>
                      </ul> </span
                    >/<span>35:46</span>
                  </div>
                </div>
                <div class="progress">
                  <div
                    class="move_progress"
                    :style="{ 'margin-left': move / 37.5 + 'rem' }"
                  ></div>
                </div>
                <img src="../assets/images/详情/加15.png" alt="" @click="add" />
              </div>
              <div class="audio_middle_bottom">
                <div @click="showtime" class="speedwidth">
                  <img src="../assets/images/详情/定时@2x.png" alt="" />
                  <p v-if="timeshow">定时</p>
                  <van-count-down
                    :time="time"
                    format="mm:ss"
                    @finish="onFinish"
                    v-else
                  />
                </div>
                <div @click="showPopup" class="speedwidth">
                  <img src="../assets/images/详情/倍速@2x.png" alt="" />
                  <p>{{ speedContent[db] }}</p>
                </div>
                <van-popup v-model:show="show" position="bottom">
                  <div v-if="popupflag">
                    <p class="top">倍速播放</p>
                    <ul>
                      <li
                        v-for="(value, index) in content"
                        :key="value"
                        :style="{
                          color: index === db ? '#FCD821' : 'black',
                        }"
                        @click="hangdleClick(index)"
                      >
                        {{ value }}
                      </li>
                    </ul>
                    <p class="bottom">关闭</p>
                  </div>
                  <div v-else>
                    <p class="top">定时关闭</p>
                    <ul>
                      <li
                        v-for="(value, index) in timecontent"
                        :style="{
                          color: index === timeflag ? '#FCD821' : 'black',
                        }"
                        @click="timeClick(index)"
                        :key="value"
                      >
                        {{ value }}
                      </li>
                    </ul>
                    <p class="bottom">关闭</p>
                  </div>
                </van-popup>
                <img
                  :src="
                    logoflag
                      ? require('../assets/images/详情/播放@2x.png')
                      : require('../assets/images/详情/zangting.png')
                  "
                  alt=""
                  class="play"
                  @click="play"
                />
                <div>
                  <img src="../assets/images/详情/下载@2x.png" alt="" />
                  <p>下载</p>
                </div>
                <div>
                  <img src="../assets/images/详情/加入列表@2x.png" alt="" />
                  <p>加入列表</p>
                </div>
              </div>
            </div>
            <nav class="detail_nav">
              <ul>
                <li v-for="(value, index) in navimg" :key="value">
                  <img :src="value" alt="" />
                  <p>{{ navlogo[index] }}</p>
                </li>
              </ul>
            </nav>
          </main>
          <section class="main">
            <div :class="{ main_font: true, show: showflag ? true : false }">
              <img
                src="../assets/images/详情/窗边的小豆豆@2x.png"
                alt=""
                class="img_1"
              />
              <div class="render_top">
                <p>-2016年第1本书-</p>
                <p>
                  <img src="../assets/images/详情/社会能力@2x.png" alt="" />
                </p>
                <p class="study">《如何培养孩子的社会能力》</p>
                <div class="render_center">
                  <img
                    src="../assets/images/详情/菱形块@2x.png"
                    alt=""
                    class="squarelogo"
                  />
                  <h3>荐语</h3>
                  <p>
                    社会能力就是孩子解决冲突和与人相处的能
                    力，人是社会动物，没有社会能力的孩子很 难取得成功。
                  </p>
                  <p>
                    舒尔博士提出的“我能解决问题”法，通过对
                    话、游戏和活动等独特的方式教给孩子自己
                    学会怎样解决问题，如何处理与朋友、老师
                    和家人之间的日常冲突，以及寻找各种解决
                    办法并考虑后果，并且能够理解别人的感受，
                    从而与人和谐相处，成长为一个社会能力强， 充满自信的人。
                  </p>
                  <img
                    src="../assets/images/详情/菱形块@2x.png"
                    alt=""
                    class="squarelogo"
                  />
                  <h3>作者简介</h3>
                  <p>
                    社会能力就是孩子解决冲突和与人相处的能
                    力，人是社会动物，没有社会能力的孩子很 难取得成功。
                  </p>
                  <p>
                    舒尔博士提出的“我能解决问题”法，通过对
                    话、游戏和活动等独特的方式教给孩子自己
                    学会怎样解决问题，如何处理与朋友、老师
                    和家人之间的日常冲突，以及寻找各种解决
                    办法并考虑后果，并且能够理解别人的感受，
                    从而与人和谐相处，成长为一个社会能力强， 充满自信的人。
                  </p>
                </div>
              </div>
            </div>
            <p class="bottom" @click="showClick">
              <span v-if="showflag"
                >点击查看全部<img src="../assets/images/详情/向下.png" alt=""
              /></span>
              <span v-else>点击收起 ^</span>
            </p>
            <h2>家长课</h2>
            <div class="parents">
              <img src="../assets/images/详情/人物.png" alt="" />
              <div>
                <h4>成就孩子,12堂优秀父母养成大课</h4>
                <p>好的家教，拼的是这三根支柱</p>
              </div>
            </div>
            <h2>相关推荐</h2>
            <div
              class="parents recommend"
              v-for="value in getdetaillist"
              :key="value"
            >
              <img :src="value.imgUrl" alt="" />
              <div>
                <h4>{{ value.title }}</h4>
                <p>好的家教，拼的是这三根支柱</p>
                <p class="play">{{ value.view }}</p>
              </div>
              <div class="btn">
                <img src="../assets/images/详情/播放@2x.png" alt="" />听书
              </div>
            </div>
          </section>
          <footer class="footerwrap">
            <div class="VipWrap">
              今日购买即可抽奖,最高再得一年！
              <div>立即开通</div>
            </div>
            <div class="comment">
              <input type="text" placeholder="写下听书感受" />
              <div><img src="../assets/images/详情/评论.png" alt="" />6179</div>
              <div><img src="../assets/images/详情/关注.png" alt="" />71W+</div>
            </div>
          </footer>
          <img
            src="../assets/images/详情/左下角播放@2x.png"
            alt=""
            class="left_img"
          />
        </van-tab>
        <!-- 视频 -->
        <van-tab title="视频">
          <main class="movie">这是视频</main>
        </van-tab>
      </van-tabs>
      <img
        src="../assets/images/详情/转发图标@2x.png"
        alt=""
        class="img_right"
      />
    </header>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    //底部数据请求
    const store = useStore();
    const getdetaillist = computed(() => store.state.detail.getdetaillist);
    const getdetail = () => store.dispatch("getdetail");
    //主题的数据请求
    const getdetailcontent = computed(
      () => store.state.detail.getdetailcontent
    );
    const getdata = computed(() => ref(location.hash).value.split("/")[2]);
    const getdetailmain = () =>
      store.dispatch("getdetailmain", {
        pdsid: getdata.value,
      });
    onMounted(() => {
      getdetail();
      getdetailmain();
    });
    //切换图标得flag
    let logoflag = ref(true);
    // 滚动条增加功能
    let move = ref(-195);
    //计时功能
    let i = ref(0);
    let j = ref(0);
    let k = ref(0);
    let timemove = ref(1000);
    let db = ref(1);
    let countDownTimming = "";
    const play = () => {
      logoflag.value = !logoflag.value;
      if (!logoflag.value) {
        clearInterval(countDownTimming);
        countDownTimming = setInterval(() => {
          //滚动条加加
          if (move.value <= 0) {
            move.value += (1 / (35 * 60 + 46)) * 195;
          }
          //数字滚动
          if (i.value >= 0 && i.value < 60) {
            i.value++;
          } else {
            i.value = 0;
            j.value++;
            if (j.value >= 60) {
              j.value = 0;
              k.value++;
              if (k.value >= 24) {
                k.value = 0;
              }
            }
          }
          if (j.value + ":" + i.value === "35:46") {
            clearInterval(countDownTimming);
          }
        }, timemove.value / db.value);
      } else {
        clearInterval(countDownTimming);
      }
    };
    const doublei = computed(() => {
      return i.value < 10 ? "0" + i.value : i.value;
    });
    const doublej = computed(() => {
      return j.value < 10 ? "0" + j.value : j.value;
    });
    const doublek = computed(() => {
      return k.value < 10 ? "0" + k.value : k.value;
    });
    //加减按钮
    const add = () => {
      i.value += 15;
      move.value += (15 / (35 * 60 + 46)) * 195;
      if (move.value >= 0) {
        move.value = 0;
        i.value = 46;
        clearInterval(countDownTimming);
      }
      if (i.value >= 60) {
        i.value -= 60;
        j.value++;
        if (j.value >= 60) {
          j.value -= 60;
        }
      }
    };
    const reduce = () => {
      i.value -= 15;
      move.value -= (15 / (35 * 60 + 46)) * 195;
      if (move.value <= -195) {
        move.value = -195;
        i.value = 0;
      }
      if (i.value < 0) {
        i.value = 60 + i.value;
        j.value--;
        if (j.value <= 0) {
          j.value = 0;
        }
      }
    };
    //倍速
    const show = ref(false);
    const showPopup = () => {
      popupflag.value = ref(true);
      show.value = true;
    };
    let content = ["0.75倍速", "正常倍速", "1.25倍速", "1.5倍速", "2.0倍速"];
    let speedflag = [0.75, 1, 1.25, 1.5, 2];
    let speedContent = ["0.75x", "倍速", "1.25x", "1.5x", "2.0x"];
    const hangdleClick = (index) => {
      db.value = index;
      if (!logoflag.value) {
        clearInterval(countDownTimming);
        countDownTimming = setInterval(() => {
          //滚动条加加
          if (move.value <= 0) {
            move.value += (1 / (35 * 60 + 46)) * 195;
          }
          //数字滚动
          if (i.value >= 0 && i.value < 60) {
            i.value++;
          } else {
            i.value = 0;
            j.value++;
            if (j.value >= 60) {
              j.value = 0;
              k.value++;
              if (k.value >= 24) {
                k.value = 0;
              }
            }
          }
          if (j.value + ":" + i.value === "35:46") {
            clearInterval(countDownTimming);
          }
        }, timemove.value / speedflag[db.value]);
      }
    };
    //定时
    let popupflag = ref(true);
    const time = ref(3000);
    const onFinish = () => {
      timeshow.value = false;
      logoflag.value = !logoflag.value;
      timeflag.value = 0;
      clearInterval(countDownTimming);
    };
    const showtime = () => {
      popupflag.value = false;
      show.value = true;
    };
    let timeshow = ref(true);
    let timecontent = ["10分钟", "20分钟", "30分钟", "60分钟", "不开启"];
    let timeDown = [600000, 1200000, 1800000, 3600000, 0];
    let timeflag = ref(4);
    let timeClick = (index) => {
      timeflag.value = index;
      time.value = timeDown[index];
      timeshow.value = ref(true);
      if (index !== 4) {
        timeshow.value = false;
      }
    };
    //导航栏
    const navlogo = [
      "思维导图",
      "纸质书",
      "文字稿",
      "家长课",
      "测一测",
      "训练营",
      "相关推荐",
    ];
    const navimg = [
      require("../assets/images/详情/思维导图@2x.png"),
      require("../assets/images/详情/纸质书@2x.png"),
      require("../assets/images/详情/文字稿@2x.png"),
      require("../assets/images/详情/家长课@2x.png"),
      require("../assets/images/详情/测一测@2x.png"),
      require("../assets/images/详情/训练营.png"),
      require("../assets/images/详情/相关推荐.png"),
    ];
    //点击展开
    let showflag = ref(true);
    const showClick = () => {
      showflag.value = !showflag.value;
    };
    //顶部tab切换
    const active = ref(2);
    //返回
    const router = useRouter();
    const goback = () => {
      router.go(-1);
    };
    return {
      goback,
      router,
      //地址
      getdata,
      //底部推荐数据获取
      getdetailcontent,
      store,
      getdetaillist,
      getdetail,
      getdetailmain,
      //点击展开功能
      showflag,
      showClick,
      //导航栏
      navlogo,
      navimg,
      //弹出框样式内容标记
      timeshow,
      timeDown,
      timeClick,
      timeflag,
      timecontent,
      popupflag,
      //定时
      showtime,
      onFinish,
      time,
      //倍速
      show,
      showPopup,
      content,
      speedflag,
      db,
      hangdleClick,
      speedContent,
      //切换标志
      logoflag,
      //音频加减
      reduce,
      add,
      i,
      j,
      k,
      //计算属性
      doublei,
      doublej,
      doublek,
      //进度体条
      timemove,
      move,
      countDownTimming,
      active,
      play,
    };
  },
};
</script>

<style lang="less">
.detail {
  position: relative;
  background: white;
  .van-tabs {
    position: static;
  }
  .van-tabs__nav {
    width: 100px;
  }
  main {
    background: white;
    box-sizing: border-box;
    padding: 0 17px;
    top: 50px;
    left: 0px;
    position: absolute;
    width: 375px;
    .audio_top {
      display: flex;
      width: 100%;
      height: 135px;
      font-size: 16px;
    }
    .audio_top_img {
      height: 129px;
      width: 99px;
      font-size: 16px;
    }
    .audio_top_right {
      margin-left: 10px;
    }
    h3 {
      height: 15px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 18px;
    }
    .middle_font {
      margin-top: 12px;
      height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #a9abaa;
      line-height: 18px;
    }
    .footer_font {
      margin-top: 62px;
      height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #0d0d0d;
      line-height: 18px;
    }
  }
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .audio_middle {
    padding: 0 10px;
    height: 133px;
    .audio_middle_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time {
        width: 75px;
        height: 16px;
        background: #575654;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          display: flex;
          margin-left: -16px;
          height: 12px;
          width: 42px;
          font-size: 8px;
          color: white;
        }
      }
      .progress {
        width: 195px;
        height: 3px;
        background: #eeeeee;
        overflow: hidden;
        position: relative;
        .move_progress {
          width: 195px;
          height: 3px;
          background: #575654;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
    .audio_middle_bottom {
      height: 85px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      p {
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #7c7c7c;
        line-height: 18px;
      }
      .play {
        width: 67px;
        height: 67px;
      }
      img {
        width: 16px;
        height: 16px;
        margin-bottom: 10px;
      }
    }
    .van-popup {
      padding: 0 20px;
      font-size: 16px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      div {
        width: 100%;
      }
      .top {
        border-bottom: 1px solid lightgray;
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #575654;
      }
      .bottom {
        border-top: 1px solid lightgray;
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #575654;
      }
      li {
        margin: 15px 0;
        text-align: center;
        font-size: 12px;
      }
    }
  }
  .van-count-down {
    font-size: 12px;
    height: 12px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #7c7c7c;
  }
  .countDown {
    display: flex;
  }
  .speedwidth {
    width: 35px;
  }
  .img_left {
    height: 20px;
    width: 12px;
    margin-left: 10px;
  }
  .img_right {
    height: 18px;
    width: 18px;
    margin-right: 10px;
  }
  //Nav样式
  .detail_nav {
    left: 0px;
    bottom: -80px;
    width: 100%;
    height: 80px;
    background: #f7f7f7;
    border-radius: 5px;
    position: absolute;
    z-index: 88;
    overflow: auto;
    ul {
      height: 80px;
      display: inline-flex;
      align-items: center;
      li {
        margin-right: 30px;
        width: 50px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 1;
      }
      li:first-child {
        margin-left: 10px;
      }
      img {
        margin-bottom: 5px;
        width: 22px;
        height: 25px;
      }
    }
  }
  .main {
    background: white;
    padding: 0 17px 105px 17px;
    box-sizing: border-box;
    top: 400px;
    left: 0px;
    position: absolute;
    width: 375px;
    .main_font {
      .img_1 {
        width: 100%;
        height: 117px;
        margin-top: 17px;
        margin-bottom: 70px;
      }
      .render_top {
        display: flex;
        flex-direction: column;
        align-items: center;
        p:first-child {
          height: 16px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #595959;
          line-height: 18px;
          margin-bottom: 26px;
        }
        p:nth-of-type(2) {
          margin-bottom: 51px;
          img {
            width: 100px;
            height: 140px;
          }
        }
        .study {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #888888;
          line-height: 18px;
        }
      }
      .render_center {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 86px;
        .squarelogo {
          height: 18px;
          width: 18px;
        }
        h3 {
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #555555;
          line-height: 18px;
          margin-top: 9px;
        }
        p {
          overflow: hidden;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #565656;
          letter-spacing: 5px;
          margin-top: 44px;
        }
      }
    }
    .bottom {
      margin-top: 14px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #f19265;
      text-align: center;
      img {
        height: 6px;
        width: 8px;
        margin-left: 2px;
      }
    }
    h2 {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #040404;
      line-height: 18px;
      margin: 31px 0px 24px 0px;
      position: relative;
    }
    h2::before {
      position: absolute;
      content: "";
      width: 7px;
      height: 20px;
      left: -17px;
      top: 0px;
      background: #f7d60a;
    }
    //家长课
    .parents {
      position: relative;
      display: flex;
      .btn {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #6f6d6e;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          margin-right: 2px;
          width: 18px;
          height: 18px;
        }
        position: absolute;
        right: 0px;
        bottom: 10px;
        width: 63px;
        height: 26px;
        background: #f5f6fb;
        border-radius: 13px;
      }
      div {
        margin-left: 10px;
      }
      h4 {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #040404;
        line-height: 36px;
      }
      p {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #b6b6b6;
        line-height: 18px;
      }
      img {
        width: 82px;
        height: 110px;
      }
      .play {
        margin-top: 23px;
      }
    }
  }
  .footerwrap {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    .comment {
      height: 55px;
      display: flex;
      padding: 0 5px;
      justify-content: space-between;
      align-items: center;
      background: white;
      input {
        width: 277px;
        height: 30px;
        background: #f6f6f4;
        border-radius: 30px;
        border: none;
        text-indent: 18px;
        position: relative;
      }
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 10px;
        img {
          width: 17px;
          height: 15px;
        }
      }
    }
    .VipWrap {
      height: 47px;
      background: #fde9c4;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #625249;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 78px;
        height: 28px;
        background: #fe813f;
        border-radius: 14px;
        color: white;
      }
    }
  }
  .left_img {
    position: fixed;
    bottom: 123px;
    left: 0px;
    width: 39px;
    height: 39px;
  }
  .recommend {
    margin-top: 10px;
  }
  .show {
    height: 1100px;
    overflow: hidden;
  }
}
</style>
